<template>
	<view class="content">
		<!-- 电量显示栏-->
		<view class="top_nav">
			<view class="kong"></view>
			<!-- <image src="../../static/buy/1.png"></image> -->
			<view class="tab_item">
				<view class="return" @click="returnPage">
					<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/course/jiantou.png"></image>
				</view>
				<view class="title">客服</view>
				<view class="return"></view>
			</view>
		</view>
		
		<view class="kefu_list">
			<view class="kefu_item"  @tap="open(0, 'center','phone')">
				<view class="kefu_wrap">
					<view class="kefu_left">
						<view class="kefu_img">
							<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/list/dianhua.png" mode="scaleToFill"></image>
						</view>
						<view class="kefu_name">电话客服</view>
					</view>
					<view class="kefu_right">
						<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/4.png"></image>
					</view>
				</view>
			</view>
			<openAlert class='openAlert' ref="openAlert1" BgColor='rgba(0, 0, 0, 0.7)' :AlertClass="AlertClass" :AlertPosition="AlertPosition">
			    <view class="modal_wrap">
					<view class="modal_title">联系客服</view>
					
					<view class="modal_content">
						<view class="con_item">是否联系客服？</view>
					</view>
					<view class="btn_wrap">
						<view class="cancel_btn" @click.stop="cancel">取消</view>
						<view class="modal_btns"  @click="check('phone')">联系客服</view>
					</view>
			    </view>
			</openAlert>
			<view class="kefu_item" @click="toFeedback">
				<view class="kefu_wrap">
					<view class="kefu_left">
						<view class="kefu_img">
							<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/list/yijianfankui.png" mode="scaleToFill"></image>
						</view>
						<view class="kefu_name">意见反馈</view>
					</view>
					<view class="kefu_right">
						<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/4.png"></image>
					</view>
				</view>
			</view>
			<view class="kefu_item" @tap="open(0, 'center','weixin')">
				<view class="kefu_wrap">
					<view class="kefu_left">
						<view class="kefu_img">
							<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/list/guanzhu.png" mode="scaleToFill"></image>
						</view>
						<view class="kefu_name">关注公众号</view>
					</view>
					<view class="kefu_right">
						<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/4.png"></image>
					</view>
				</view>
			</view>
			<openAlert class='openAlert1' ref="openAlert2" BgColor='rgba(0, 0, 0, 0.7)' :AlertClass="AlertClass" :AlertPosition="AlertPosition">
				<view class="modal_title">扫码关注公众号</view>
			    <view class="modal_wrap">
					<image :src="Config_ysy.image_url + data.wechat_img"></image>
			    </view>
			</openAlert>
		</view>
	</view>
</template>

<script>
	import openAlert from '@/components/open-alert/open-alert';
	export default {
		components: { openAlert },
		data() {
			return {
				data:{
					
				},
				AlertClass: 0,
				AlertPosition: '',
				token:''
			}
		},
		onLoad(option) {
			//调起联系客服
			this.token=option.token
			this.kefu()
		},
		methods: {
			//关闭提示框
			cancel(){
				this.$nextTick(function() {
					this.$refs.openAlert1.Close();
				});
			},
			//打开提示框
			open(Class, Position,type) {
				if(type=='phone'){
					this.$nextTick(function() {
						this.AlertClass = Class;
						this.AlertPosition = Position;
						this.$nextTick(function() {
							// console.log(this.$refs)
							this.$refs.openAlert1.Show();
						});
					});
				}else{
					this.$nextTick(function() {
						this.AlertClass = Class;
						this.AlertPosition = Position;
						this.$nextTick(function() {
							// console.log(this.$refs)
							this.$refs.openAlert2.Show();
						});
					});
				}
				
			},
			//check
			check(type){
				if(type=='phone'){
					this.Unfold_data.externalLinks("tel:" + this.data.customer_service_phone)
				}
			},
			//联系客服
			kefu(){
				let params={
					token:this.token
				};
				var url ='/api/usercenter/contact'
				this.Unfold_data.upload_data(params, 'POST', url, res => {
					// console.log(res);
					if (res.statusCode == 200 && res.data.code == 1) {
						this.data = res.data.data
						// console.log(this.data)
					} 
				});
			},
			//返回上一页
			returnPage(){
			    uni.navigateBack({
			     delta:1
			    })
			   },
			//建议反馈
			toFeedback(){
				uni.navigateTo({
					url:'../feedback/feedback?token='+this.token
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		width: 100%;
		height: 100%;
		background: #ededed;
	}
.content{
	width: 100%;
	position: relative;
	.top_nav{
		width: 100%;
		height: 200upx;
		background-image: url('https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/buy/1.png');
		background-size: cover;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		.kong{
			width: 100%;
			height: 60upx;
		}
		.tab_item{
			width: 90%;
			margin: 0 auto;
			height: 140upx;
			display: flex;
			align-items: center;
			justify-content: center;
			.return{
				flex: 1;
				width: 100%;
				image{
					width: 29upx;
					height: 29upx;
				}
			}
			.title{
				flex: 8;
				width: 100%;
				color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 10;
			}
		}
	}
	.kefu_list{
		width: 100%;
		padding-top: 260upx;
		.openAlert{
				width: 100%;
				.modal_wrap{
					width: 75vw;
					height: 350upx;
					background-color: #FFFFFF;
					border-radius: 20upx;
					.modal_title{
						width: 100%;
						height: 80upx;
						// background: #f0deb5;
						background: linear-gradient(#f0deb5,#a88950); /* 标准语法 */
						border-radius: 20upx 20upx 0 0;
						color: #000000;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					
					.modal_content{
						width: 70%;
						margin: 0 auto;
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 40upx 0;
						.con_item{
							text-align: center;
							font-size: 30upx;
						}
					}
					
					.btn_wrap{
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						.cancel_btn{
							width: 200upx;
							margin: 0 auto;
							height: 60upx;
							margin-top: 20upx;
							border: 2upx solid #f0deb5;
							color: #000000;
							display: flex;
							align-items: center;
							justify-content: center;
						}
						.modal_btns{
							width: 200upx;
							margin: 0 auto;
							height: 60upx;
							margin-top: 20upx;
							background: linear-gradient(top,#f0deb5,#a88950);
							color: #000000;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
					
				}
			}
			.openAlert1{
					width: 100%;
					.modal_title{
						width: 100%;
						height: 80upx;
						// background: #f0deb5;
						background: linear-gradient(#f0deb5,#a88950); /* 标准语法 */
						border-radius: 20upx 20upx 0 0;
						color: #000000;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.modal_wrap{
						width: 75vw;
						height: 500upx;
						background-color: #FFFFFF;
						border-radius: 20upx;
						image{
							width: 100%;
							height: 98%;
							// background: #f0deb5;
							
						}
						
						// .modal_content{
						// 	width: 70%;
						// 	margin: 0 auto;
						// 	display: flex;
						// 	align-items: center;
						// 	justify-content: center;
						// 	padding: 40upx 0;
						// 	.con_item{
						// 		text-align: center;
						// 		font-size: 30upx;
						// 	}
						// }
						
						}
				}
		.kefu_item{
			width: 100%;
			height: 120upx;
			background: #FFFFFF;
			border-bottom: 2upx solid #ededed;
			display: flex;
			align-items: center;
			justify-content: center;
			
			}
			.kefu_wrap{
				width: 95%;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: center;
				.kefu_left{
					flex: 9;
					display: flex;
					align-items: center;
					justify-content: center;
					.kefu_img{
						flex: 1;
						text-align: center;
						image{
							width: 40upx;
							height: 40upx;
						}
					}
					.kefu_name{
						flex: 8;
					}
				}
				.kefu_right{
					flex: 1;
					text-align: right;
					image{
						width: 30upx;
						height: 30upx;
					}
				}
				
		}
	}
}
</style>
